<template>
    <div>
    <!--商品详情区-->
    <div v-if="detail" id="详情区">   
    <div class="goods">     
        <van-nav-bar title="详情" left-arrow  @click-left="onClickLeft" /> 
    <div v-for="(Good,index) in Goods" :key="index"> 
        
        <div class="imgg">
         <img :src="Good.goods_picture" class="img">
        </div>        
           
         <van-cell-group>
            <van-cell>
        <div class="goods-title" >{{ Good.goods_name}}</div>
        <div class="goods-price">原价¥{{Good.goods_price }}</div>
        </van-cell>
        <van-cell class="goods-express">
        <van-col span="15">{{ Good.goods_info }}</van-col>
        <van-col span="10">交易方式：面交</van-col>
        <van-col span="14">数量：{{ Good.goods_num }}</van-col>
        </van-cell>
        </van-cell-group>

        <van-cell-group class="goods-cell-group">
        <van-cell value="进入交易" icon="chat" is-link @click="sorry">
        <template slot="title">
          <span class="van-cell-text">联系方式</span>
          <van-tag type="danger">欢迎</van-tag>
        </template>
      </van-cell>
      <van-cell title="交易地点" icon="location" is-link @click="sorry" />
    </van-cell-group>
        <div >
            <van-row>
            <van-col span="12">
               <van-button bottom-action @click="cl(index)" >收藏</van-button> 
               </van-col>            
               <van-col span="12"> 
               <van-button size="normal"  type="primary" bottom-action  @click="comment(index)">查看评论</van-button>
               </van-col>
                </van-row>
        </div>     
    </div>

    </div>
    </div>
         <!--商品评论区-->
     <div v-if="!detail" id="评论区" style="height:800px">
     <van-nav-bar title="评论" left-arrow  @click-left="go_detail()" /> 
      
          <!--评论内容-->
        <div v-for="(com,index) in coms" :key="index" style="position:relative;left:30px;width:80%"> 
        <van-cell-group>
         <div class="com_css">
          <div class="user_css">           
        <van-icon name="contact" />用户：{{com.comment_user}}
        </div>
        <div class="content_css">   
        <van-icon name="records" />{{com.comment_content}}         
        </div>
  
         </div>
        </van-cell-group>
        <br>
      </div>
      <br><br>
        <!--评论面板-->
         <div class="combtn">
            <van-field v-model="sendcomment" placeholder="请输入评论" /> 
            <div>
                <van-button size="large" type="primary" @click="send()">发表评论</van-button>
            </div>
         </div> 
        </div> 
    </div>
</template>
<script>
import { Toast } from 'vant';
import axios from "axios";
export default {
data() {
    return {  
        id:[],
        coms:[],
        detail:true, 
        
        msg:"",
        msg2:"",
        sendcomment:''
           }
        },

  
  computed:{
      Goods(){
            return this.$store.state.Goods
      },
           uN(){
            return this.$store.state.uN
        },

   
  },
//获取商品评论信息


methods: {
sorry() {
      Toast('暂无后续逻辑~');
    },
  
// 发评论
send(){
    if(this.uN==""){      
        Toast.fail('用户未登录');
    }else{
        if(this.sendcomment==''){
        Toast.fail('评论为空');
        }else{
            axios({
            method: "post",
            url: "http://localhost:3000/sendComment",
            data: {
            sendUser: this.uN,
            content:this.sendcomment,
            goodsname:this.id.goods_name
            },
            headers: {
            "Content-Type": "text/plain"
            }
         }).then(result => {
             console.log(result);

        })    
        Toast.success('发表成功');
        this.loadcom();
        this.sendcomment=''
    }
    }
},
    
    //返回
    onClickLeft() {
      this.$router.go(-1)
    },
    //查看评论
    comment(index){
        this.detail=false;
       this.id=this.$store.state.Goods[index];
       this.loadcom()
    },
    //加载评论
    loadcom(){
       axios({
            method: "post",
            url: "http://localhost:3000/getComment",
            data: {               
            getcom:this.id.goods_name
            },
            headers: {
            "Content-Type": "text/plain"
            }
         }).then(result => {
             console.log(result);
             if(result.data=="没有数据"){
                 this.coms=[];
                 Toast.fail('暂时没有评论')
             }else{
           this.coms=result.data}
        })
    },
    //查看详情
    go_detail(){
        this.detail=true
    },

    cl(index){
        if(this.uN==""){
                Toast.fail('用户未登录');
        }else{
        this.$store.commit('clgoods',index)
                
                axios({
                method: "post",
                url: "http://localhost:3000/Clgoods",
                data: {
                clName: this.uN,
                clg_title: this.$store.state.Goods[index].goods_name,
                clg_desc: this.$store.state.Goods[index].goods_desc,
                clg_price: this.$store.state.Goods[index].goods_price,
                clg_img: this.$store.state.Goods[index].goods_picture,
                clg_info: this.$store.state.Goods[index].goods_info
                },
                headers: {
                "Content-Type": "text/plain"
                }
            }).then(result => {
                    console.log(result);
                    if(result.data=="请勿重复收藏"){
                    Toast.fail('请勿重复收藏');
                    }else{
                    Toast.success('收藏成功');
                    }
                })

               }
             } 
          }
}
</script>
<style>
.combtn{
    height: 140px;
    width: 100%;
    position: fixed;
    bottom: 0;
}
.content_css{
    font-family:'黑体';
    font-size: 20px;
    color:lightseagreen
}
.goods{
 padding-bottom: 50px;
}
.goods-title{
    font-size: 16px;
}
.goods-price{
   color:#f44;
}
.goods-express {
    color: #999;
    font-size: 12px;
    padding: 5px 15px;
  }
.imgg{
    text-align: center;
     
}
.img{
    text-align: center;
      width: 12rem;
      height:18rem;    
}
.gg{
    text-align: right;
}
</style>

